<template>
  <div>
    case1 <input v-model="message.foo.name" />
    case1 <input />
    <a-button @click="stopWatch">停止监听</a-button>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, watchEffect } from 'vue'
const message = ref({
    foo: {
        name: 'zz',
        age: 18
    }
})

// watch(message, (newVal, oldVal) => {
//     console.log(newVal, oldVal)
// }, {
//   deep: true,
//   onTrigger (e) {
//     debugger
//   }
// })

const stopWatch = watchEffect(() => {
    console.log(message.value.foo.name)
})
</script>


<style lang='less' scoped>

</style>